<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>捕获和冒泡的理解</title>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="box" style="width:200px;height:200px;background:red;margin:0 auto">

                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>

    document.querySelector('#div1').addEventListener('click',function(){
        alert(this.id + '捕获');
    },true);
    document.querySelector('#div1').addEventListener('click',function(){
        alert(this.id + '冒泡');
    },false);
    document.querySelector('#div2').addEventListener('click',function(){
        alert(this.id + '捕获');
    },true);
    document.querySelector('#div2').addEventListener('click',function(){
        alert(this.id + '冒泡');
    },false);
    document.querySelector('#div3').addEventListener('click',function(){
        alert(this.id + '捕获');
    },true);
    document.querySelector('#div3').addEventListener('click',function(){
        alert(this.id + '冒泡');
    },false);
    document.querySelector('#box').addEventListener('click',function(e){
        alert(this.id + '冒泡');
    },false);
    document.querySelector('#box').addEventListener('click',function(e){
        //阻止向父元素进行事件传播
        //e.stopPropagation();
        //立即阻止事件传播
        //e.stopImmediatePropagation();
        alert(this.id + '捕获');

    },true);
    document.body.addEventListener('click',function(){
        alert('body捕获');
    },true)
    document.body.addEventListener('click',function(){
        alert('body冒泡');
    },false);




</script>